<template>
  <!-- 导出按钮 -->
  <div>
    <div class="importData">
      <el-card>
        <!-- 标题 -->
        <h4>员工导入</h4>

        <!-- 提示 -->
        <div class="message">
          <span class="el-icon-warning">
            每次导入仅可添加1000名员工、姓名、手机号、入职时间、聘用形势为必填项
          </span>
        </div>

        <!-- 左边 点击上传 -->
        <div class="img">
          <div class="box_one">
            <Excel :before-upload="beforeUpload" :on-success="onSuccess" />
          </div>

          <!-- 左边 将文件拖到此处 -->
          <div class="box_tow">
            <i>将文件拖到此处</i>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="js">
import {
  // 导入 excel 表格
  getImportInfoApi
} from '@/api/employee.js'
export default {
  name: 'ExportExcel',
  data() {
    return {
      // fileList: '../../../assets/common/xiaojiejie.jpg'
    }
  },
  mounted() {

  },
  methods: {
    // 没有上传图片
    beforeUpload(file) {
      const isList2M = file.size / 1024 / 1024 < 2
      if (!isList2M) {
        this.$message.error('上传图片大小不能超过 2M!')
      }
      return isList2M
    },
    async  onSuccess({ header, results }) {
      const userInfo = {
        手机号: 'mobile',
        姓名: 'mobile',
        入职日期: 'correctionTime',
        工号: 'workNumber'
      }

      const data = results.map(item => {
        // 创建一个新的对象来保存改为 英文 的数据
        const newObj = {}
        Object.keys(item).forEach(key => {
        //  得到中文对应的 英文
          const engKey = userInfo[key]
          // 将英文添加到  newObj 中
          newObj[engKey] = item[key]
        })
        return newObj
      })
      // 提示一下
      await getImportInfoApi(data)
      this.$message({
        message: '导入成功',
        type: 'success'
      })

      // 跳转路由
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss" scope>
.importData {
  margin: 20px 20px;
  h4 {
    font-size: 14px;
    text-align: center;
  }
  .message {
    background-color: #fdf6ec;
    padding: 5px;
    color: #eab566;
  }
  .img {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    i {
      font-style: normal;
    }
    .box_one {
      line-height: 100px;
      width: 250px;
      height: 100px;
      border: 1px #bdbdbd dashed;
      .btn {
      }
    }
    .box_tow {
      line-height: 100px;
      width: 250px;
      height: 100px;
      border: 1px #bdbdbd dashed;
    }
    input {
      margin-left: 70px;
      overflow: visible;
    }
  }
  .el-button--primary:focus,
  .el-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
    margin-left: -355px;
  }
}
</style>
